<template>
	<el-table :data="$store.state.app.list" :height="tableHeight" :max-height="tableHeight" 
		size="small" border highlight-current-row
		style="width: 100%">
		<el-table-column type="index" label="序号" width="50"></el-table-column>
		<el-table-column prop="roleName" label="角色名称"></el-table-column>
		<el-table-column label="权限">
			<template slot-scope="scope">
				<el-popover trigger="click" placement="right-start">
					<div slot="reference" class="name-wrapper">
						<el-button size="mini" type="success" 
							v-if="permissionFormatter(scope.row)">
							{{permissionFormatter(scope.row)}}
						</el-button>
					</div>
					<el-tree :data="permissionTrees(scope.row)">
						<span class="custom-tree-node" slot-scope="{node, data}">
							<span v-text="node.label"></span>
							<span style="text-align: right;">
								<el-tag v-for="(action, i) in data.actions" size="mini" :key="i"
									style="margin-right: 5px;">
									{{action.label}}
								</el-tag>
							</span>
						</span>
					</el-tree>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column min-width="200" align="right" :render-header="renderHeaderModify">
			<template slot-scope="scope">
				<el-button size="mini" @click="$emit('edit', scope.row)" v-permission="['sys:role:edit']">编辑
					<i class="el-icon-edit-outline"></i>
				</el-button>
				<el-button size="mini" @click="$emit('remove', scope.row)" type="danger" v-permission="['sys:role:remove']">删除
					<i class="el-icon-delete"></i>
				</el-button>
				<el-button size="mini" @click="$emit('assignPermissions', scope.row)"  v-permission="['sys:role:assignPermissions']">权限分配</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import store from '@/store';
import cfg from './js/';
import Page from '@/components/permission/Page.js';

export default {
	store: cfg.store,
	data() {
		return {};
	},
	methods: {
		add() {
			this.$emit('add');
		},
		renderHeaderModify() {
			const directives = [{
				name: "permission", value: ['sys:role:add']
			}];
			return (
				<el-button size="mini" type="primary" plain onClick={this.add} 
					{...{directives}}>添加
					<i class="el-icon-plus"></i>
				</el-button>		
			)
		},
		permissionFormatter(row) {
			let permissionIds = row.permissionIds.concat();
			permissionIds = permissionIds.filter(permissionId => {
				if(permissionId.indexOf(":") < 0) {
					return true;
				} else {
					return false;
				}
			});
			return permissionIds.map(permissionId => {
				return store.state.global.permissionMap[permissionId].label
			}).join(", ");
		},
		permissionTrees(row) {
			let permissionIds = row.permissionIds.concat();
			permissionIds.sort((p1, p2) => {
				let m1 = p1.match(/:/g);
				let m2 = p2.match(/:/g);
				let n1 = m1 == null ? 0 : m1.length;
				let n2 = m2 == null ? 0 : m2.length;
				return n1 - n2;
			});
			let treeMap = {};
			let trees = [];
			permissionIds.forEach(permissionId => {
				let permission = store.state.global.permissionMap[permissionId];
				if(permission == null) {
					return;
				}
				let parentId = permissionId.substring(0, permissionId.lastIndexOf(":"));
				let parentPermission = store.state.global.permissionMap[parentId];
				let parent = treeMap[parentId];
				if(permission instanceof Page) {
					let tree = {
						id: permission.id,
						label: permission.label,
						actions: []
					}
					if(parent == null) {
						trees.push(tree);
					} else {
						if(parent.children == null) {
							parent.children = [];
						}
						parent.children.push(tree);
					}
					treeMap[tree.id] = tree;
				} else {
					let actions = parentPermission.actions;
					if(actions != null) {
						let action = actions.find(action => action.id == permissionId);
						if(action != null) {
							parent.actions.push({
								id: action.id, 
								label: action.label
							});
						}
					}
				}
			});
			return trees;
		}
	},
	computed: {
		tableHeight() {
			return window.innerHeight - 200;
		}
	}
}
</script>